<template>
    <div class="floatIcon-wrap"  ref="wrapNode" @click.stop="()=>{}">
      <canvas class="float-canvas" ref="canvasNode"></canvas>
    </div>
  </template>
  
  <script>
    export default {
      name: "FloatIcon",
      props: {
        successLoadedIconGroup: Array, // 加载完成的icon
        allIconIsLoaded: Boolean, // 加载完成的标识
      },
      data() {
        return {
          _moveIconList: [], // 运动中的icon
          _prePushTime: 0, // 上一次的自动新增icon时间
          _canvasCtx: null, // canvas上下文
          _wrapWidth: 0,
          _wrapHeight: 0,
          _handSendLike: false, // 手动点赞标识
          _preHandSendTime: 0, // 上一次的手动新增icon时间
          _iconList: [], // 待发射icon队列
        }
      },
      watch: {
        allIconIsLoaded(bool) {
          if (bool) {
            // 初始化漂浮动画
            this.initFloatAni();
          }
        }
      },
      mounted() {
        // 供socket中love事件调用
        // this.$bus.$on('triggerFloatIcon', this.addNewIcon);
      },
      methods: {
        // 初始化漂浮动画
        async initFloatAni() {
          // 设置画布
          const { width: wrapWidth, height: wrapHeight } = this.$refs.wrapNode.getBoundingClientRect();
          const canvasNode = this.$refs.canvasNode;
          canvasNode.width = wrapWidth * 2;
          canvasNode.height = wrapHeight * 2;
          this._wrapWidth = wrapWidth;
          this._wrapHeight = wrapHeight;
          this._moveIconList = [];
          this._prePushTime = 0;
          this._preHandSendTime = 0;
          this._iconList = [];
          this._canvasCtx = canvasNode.getContext('2d');
          this._canvasCtx.translate(wrapWidth, wrapHeight * 2); // 画布原点移动到 bottom center
          // 渲染icon
          this.render();
        },
        // 向icon队列新增icon
        addNewIcon() {
          this._iconList.push([this.successLoadedIconGroup[Math.floor(this.getRandom(0, 12))], 0, 0, 0, 0, this.getRandom(2.25, 6)]); // icon x y width height 初始偏移量
          console.log(this._iconList, 'iconList')
        },
        // 渲染icon
        render() {
          // 清除画布
          this._canvasCtx.clearRect(-this._wrapWidth, -this._wrapHeight * 2, this._wrapWidth * 2, this._wrapHeight * 2);
          // 间隔 500ms - 1000ms 随机添加新icon
          if (Date.now() - this._prePushTime > this.getRandom(40, 100) * 10) {
            if (this._iconList.length > 0) {
              this._moveIconList.unshift(this._iconList.shift());
              this._prePushTime = Date.now();
            }
          }
          for (let i = this._moveIconList.length - 1; i >= 0; i--) {
            const [icon, x, y, width, height, sin] = this._moveIconList[i];
            this._canvasCtx.drawImage(icon, x, y, width, height);
            if (width < this._wrapWidth) {
              this._moveIconList[i] = [icon, x - 1, y - 2, width + 2, height + 2, sin];
            } else {
              this._moveIconList[i] = [icon, x + Math.sin(sin), y - (1 + Math.random() / 2), width, height, sin + 0.09];
            }
            if (y < -(this._wrapWidth + this._wrapHeight * 2)) this._moveIconList.pop(); // icon飘出画布，删除数据
          }
          window.requestAnimationFrame(this.render);
        },
        // 获取指定区间随机数（a < b）
        getRandom(a, b) {
          return Math.random() * (b - a) + a;
        }
      }
    };
  </script>
  
  <style lang="less" scoped>
    .floatIcon-wrap {
      width: 120px;
      height: 420px;
      position: absolute;
      left: -50%;
      bottom: 100%;
      z-index: 900;
      mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
      margin-bottom: 30px;
      // background-color: rgb(77, 36, 36);
      .float-canvas {
        width: 100%;
        height: 100%;
      }
    }
  </style>